<template>
    <div class="dig">
        <div class="box" :style="boxStyle" @click="isClick">
            <div class="contanier">
                <div class="left">
                    <div class="detail">
                        <img :src="heard" alt="">
                        <div class="right">
                            <p class="name">{{ name }}</p>
                            <p class="account">{{ account }}</p>
                        </div>
                    </div>
                </div>
                <div class="right1" @click="back">
                    <el-icon>
                        <CloseBold />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { userList, photo_list } from "../../api/request";
import api from "../../api/index"
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, computed } from 'vue'
const $route = useRoute()
const $rouer = useRouter()
let { id } = $route.query
console.log(id)
const path = id.substring(id.indexOf('/static')); // 从'/static'开始提取
// console.log(path);
const account = ref('')
const name = ref('')
const data1 = ref([])
const data2 = ref([])
const photo = ref(null)
const heard = ref('')
const back = () => {
    $rouer.replace({ path: '/photo' })
}
const isClick = () => {
    $rouer.replace({ path: '/photo' })
}
const boxStyle = computed(() => ({
    backgroundImage: `url(${id})`
}));
const dataFn = async () => {
    const content1 = await userList({ page: 1, pageSize: 11 })
    const content2 = await photo_list()
    // console.log(content1)
    // console.log(content2)
    const { code, result } = content1
    if (code == 200) {
        data1.value = result.map((item) => {
            return {
                name: item.昵称,
                account: item.账号,
                headimg: item.头像
            }
        })
        // console.log(data1.value)

        // account.value = data1.value.map((item)=>item.account)
        // console.log(name.value);
        // console.log(account.value)
    }
    if (content2.code == 200) {
        data2.value = content2.result.map((item) => {
            return {
                account: item.account,
                photos: item.photo.split('\n').map((photoPath: string) => photoPath.trim()).filter(Boolean)
            }
        })
        // console.log(data2.value)
        const foundPhoto = data2.value.find(item => item.photos.includes(path));
        if (foundPhoto) {
            photo.value = foundPhoto;
            account.value = photo.value.account
            // console.log(account.value); 
        }
        else {
            console.log('No account found for the specified photo.');
        }
        const foundname = data1.value.find((item) => item.account === account.value);
        if (foundname) {
            name.value = foundname.name
            heard.value = api.url + foundname.headimg
            // console.log(heard.value)
        }
    }

}
onMounted(() => {
    dataFn()
})
</script>
<style scoped lang="scss">
.dig {
    width: 100vw;
    height: 100wh;
    position: relative;
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 216px;
        height: 400px;
        margin-left: -130px;
        margin-top: 155px;
        /* background-color: red; */
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        z-index: 1111;

        .contanier {
            width: 90%;
            height: 40px;
            align-items: center;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            margin-top: -350px;  //改

            .left {
                width: 140px;
                height: 40px;

                .detail {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    align-items: center;

                    img {
                        width: 40px;
                        height: 40px;
                        background-color: red;
                        // background-image: url(../../assets/img/);
                        border-radius: 50%;
                    }

                    .right {
                        height: 100%;

                        .name {
                            font-size: 15px;
                            font-weight: bold;
                        }

                        .account {
                            font-size: 11px;
                            margin-top: 5px;
                        }
                    }
                }
            }

            .right1 {
                width: 32px;
                height: 32px;
                // i{
                //     display: block;
                //     width: 100%;
                //     height: 100%;
                //     background-repeat: no-repeat;
                //     background-size: cover;
                //     background-image: url(../assets/img/fork.jpg);
                // }
            }
        }
    }
}
</style>